<template>
  <div>
    <el-card class="box-card">
      <div class="box1">
        <el-form ref="form" label-width="82px" label-position="left" class="box-input">
          <div>
            <el-form-item class="Input" label="模版CODE:" label-width="85px">
              <el-input size="medium " placeholder="请输入模版CODE"></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item class="Input" label="模版内容：" label-width="85px">
              <el-input size="medium " placeholder="请输入模版内容"></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item v-show="isvisible" class="Input" label="模版标题：" label-width="85px">
              <el-input size="medium " placeholder="请输入模版标题"></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item v-show="isvisible" class="Input" label="模版类型：" label-width="85px">
              <el-input size="medium " placeholder="请输入模版类型"></el-input>
            </el-form-item>
          </div>
          <div class="box-button Input">
            <el-button size="medium " type="primary" icon="el-icon-search">搜索</el-button>
            <el-button size="medium " type="primary" icon="el-icon-refresh-right">重置</el-button>
            <el-button @click="handlevisible" type="text" :icon="icon">{{
              txt
            }}</el-button>
          </div>
        </el-form>
      </div>
      <div class="box2" :class="isvisible == true ? 'quxia' : ''">
        <el-button size="medium " type="primary" icon="el-icon-pius">添加用户</el-button>
        <el-button size="medium " type="primary" icon="el-icon-bottom">导出</el-button>
        <el-button size="medium " type="primary" icon="el-icon-back">导入</el-button>
        <el-button size="medium " type="primary" icon="el-icon-document-copy">回收站</el-button>
        <el-dropdown v-show="handleselect">
          <el-button size="medium" class="handleselect">
            批量操作<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-delete">删除</el-dropdown-item>
            <el-dropdown-item icon="el-icon-moon">冻结</el-dropdown-item>
            <el-dropdown-item icon="el-icon-sunny">解冻</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="box3">
        <div class="tit">
          <span>已选择<span style="color: #1890ff; fontweight: bold">{{
            selecteData.length
          }}</span>项</span>
          <el-button type="text">清空</el-button>
        </div>
      </div>

      <div class="box4">
        <el-table size="medium" :data="tableData" style="width: 100%" border :cell-style="{ textAlign: 'center', }"
          :header-cell-style="{ backgroundColor: '#fafafa', color: 'black', textAlign: 'center', border: '1px solid #dfe6ec', }"
          id="exceldata" @selection-change="selectFun" ref="datatable" @cell-mouse-enter="handleCellMouseEnter"
          @cell-mouse-leave="handleCellMouseLeave">
          <el-table-column type="selection" width="50"> </el-table-column>
          <el-table-column label="#" width="70" align="center">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column width="120" prop="username" label="模版CODE">
            <template slot-scope="scope">
              {{ scope.row.username ? scope.row.username : "暂无" }}
            </template>
          </el-table-column>
          <el-table-column prop="realname" label="模版标题" width="104">
            <template slot-scope="scope">
              {{ scope.row.realname ? scope.row.realname : "暂无" }}
            </template>
          </el-table-column>
          <el-table-column prop="avatar" label="模版内容" width="104">
            <el-avatar icon="el-icon-user-solid" size="small"></el-avatar>
          </el-table-column>
          <el-table-column width="104" prop="sex_dictText" label="模版类型">
            <template slot-scope="scope">
              {{ scope.row.sex_dictText ? scope.row.sex_dictText : "暂无" }}
            </template>
          </el-table-column>
          
          <el-table-column label="操作" :row-style="{ textAlign: 'center' }" width="188">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="opendraw(scope.row)">编辑 |
              </el-button>
              <el-button size="mini" type="text" @click="opendiago(scope.row)">更多</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="pagina" background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pageNo" :page-sizes="[10, 20, 30]" :page-size="pageSize" layout="total, prev, pager, next,sizes"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getExcel } from "../../utils/getexcel";
import { Userlist } from "../../api/monitor";
export default {
  created() {
    this.getUserlist();
  },
  data() {
    return {
      isvisible: false,
      icon: "el-icon-arrow-down",
      txt: "展开",
      tableData: [],
      selecteData: [],
      total: 0,
      pageNo: 1,
      pageSize: 10,
      ids: [],
      highlightedRow: null,
    };
  },
  methods: {
    async getUserlist() {
      try {
        let _t = new Date();
        console.log(_t);
        let data = {
          _t: 1719307481,
          column: "createTime",
          order: "desc",
          field:
            "id,,username,realname,avatar,sex_dictText,birthday,phone,orgCode,departIds_dictText,status_dictText,action",
          pageNo: this.pageNo,
          pageSize: this.pageSize,
        };
        let res = await Userlist(data);
        console.log(res);
        this.tableData = res.result.records;
        this.total = res.result.total;
      } catch { }
    },
    handlevisible() {
      this.isvisible = !this.isvisible;
      if (this.isvisible) {
        this.icon = "el-icon-arrow-up";
        this.txt = "收起";
      } else {
        this.icon = "el-icon-arrow-down";
        this.txt = "展开";
      }
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.pageNo = 0;
      this.getUserlist();
    },
    handleCurrentChange(val) {
      this.pageNo = val - 1;
      this.getUserlist();
      this.pageNo = val;
    },
    selectFun(selection) {
      this.selecteData = selection;
      console.log(this.selecteData);
    },
    handleCellMouseEnter(row, column, cell, event) {
      this.highlightedRow = this.tableData.indexOf(row);

      this.timeoutId = setTimeout(() => {
        this.highlightedRow = null;
      }, 500);
    },
    handleCellMouseLeave() {
      clearTimeout(this.timeoutId);
      this.highlightedRow = null;
    },
  },
  computed: {
    handleselect() {
      return this.selecteData.length > 0;
    },
  },
};
</script>

<style>
.Input {
  width: 300px;
}

.Select {
  width: 100%;
}

.box-input {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.box1>* {
  display: flex;
}

.tit {
  display: flex;
  align-items: center;
  gap: 30px;
  border: 1px solid #91d5ff;
  border-radius: 5px;
  margin-top: 30px;
  padding: 0 50px;
  background-color: #e6f7ff;
  box-sizing: border-box;
}

.box4 {
  margin-top: 20px;
}

.pagina {
  margin-top: 20px;
  text-align: right;
}

.el-table__row:hover,
.el-table__body tr:hover {
  background-color: #f0f9ff;
}

.el-table__row.is-current-row,
.el-table__body tr.is-current-row {
  background-color: #e6f7ff;
}

.handleselect {
  margin-left: 10px;
}

.quxia {
  margin-top: 20px;
}
</style>